<template>
	<view class="pageContent">
		<view class="member" v-if="1" @click="detailMem(index)" v-for="(item,index) in headList" :key="index">
			<view class="memberHead" v-if="index==0">
				<view class="ellipsisOne memberHeadPro">{{item.projectName}}</view>
				<view class="memberHeadAdd" v-if="1 && (item.roleId==16||item.roleId==17)"
					@click.stop="addMem(index)">添加成员
				</view>
			</view>
			<view class="memberMid">
				<view class="memberMidLeft">
					<image class="avatar" :src="item.portraitUrl || images +'/avatar.png'" mode="widthFix" />
					<view class="userTypeMain"><text class="userType">{{item.roleName || '角色'}}</text></view>
				</view>
				<view>
					<view class="memberMsg">
						<view class="memberName textJustify">姓名</view>
						<view class="memberNameVal">：{{item.name}}</view>
					</view>
					<view class="memberMsg">
						<view class="memberName textJustify">手机号</view>
						<view class="memberNameVal">：{{item.telephone || '暂无'}}</view>
					</view>
					<view class="memberMsg">
						<view class="memberName textJustify">门禁期限</view>
						<view class="memberNameVal">：{{item.expireDate || '永久有效'}}</view>
					</view>
					<!-- 1.不能修改户主 2.租客不能修改自己 -->
					<block v-if="item.roleId==16 || (userMsg.roleId==17 && item.roleId==17)">
						<view class="handlerCha "></view>
					</block>
					<block v-else>
						<view class="handlerCha handlerEpt" @click.stop="updateMem(index)">修改</view>
						<view class="handlerCha handlerBlu" @click.stop="cancleHandle(index)">关闭帐户</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '../../static/config.js'
	import util from '../../static/utils/util.js'
	export default {
		data() {
			return {
				images: config.images,
				localImages: config.localImages,
				headList: [],
				room: '',
				roomItem: '',
				userMsg: '',
				projectName: '湘江世纪城-一期-3栋-2004室-2008',
			}
		},

		onLoad() {
			console.log('houseMen-onLoad')
		},

		onShow() {
			var room = wx.getStorageSync('room');
			this.room = room;
			var userMsg = wx.getStorageSync('userMsg');
			this.userMsg = userMsg;
			this.roomMembers();
		},

		methods: {
			detailMem(index) {
				console.warn("===detailMem", index)
				var item = this.headList[index];
				var json = JSON.stringify(item)
				wx.navigateTo({
					url: '/pagesA/index/detailMem?json=' + json
				})
			},

			//修改用户
			updateMem(index) {
				this.roomItem = this.headList[index];
				var item = this.headList[index];
				var json = JSON.stringify(item)
				wx.navigateTo({
					url: '/pagesA/index/addMem?json=' + json,
				})
			},

			cancleHandle(index) {
				this.roomItem = this.headList[index];
				this.onShowModal();
			},

			onShowModal() {
				var self = this;
				wx.showModal({
					title: '用户提示',
					content: '关闭后该账户将停止一切功能使用，数据无法再恢复，是否确定要关闭吗？',
					cancelColor: "#999999",
					confirmColor: "#1086FF",
					confirmText: '关闭',
					cancelText: '取消',
					success(res) {
						if (res.confirm) {
							self.closeAccount();
						} else if (res.cancel) {

						}
					}
				})
			},

			async roomMembers() {
				wx.showLoading({
					title: '',
					mask: true,
					duration: 500
				})
				var url = '/UserServer/owner/info/roomMembers'
				var params = {}
				var options = {
					url,
					params
				}
				var param = await util.requestPro(options);
				this.headList = param;
			},

			async closeAccount() {
				var room = this.roomItem;
				var url = '/UserServer/owner/info/closeAccount?'
				var params = {
					ownerId: room.ownerId,
					roomId: room.roomId,
				}
				var paramUrl = util.stringifyQs(params)
				url = url + paramUrl
				var options = {
					url,
					params: {},
					method: 'PUT',
				}
				await util.requestPro(options);
				wx.showToast({
					title: '关闭成功',
					icon: 'none'
				})
				this.roomMembers();
			},

			//添加成员
			async addMem(index) {
				wx.showLoading({
					title: '',
					mask: true,
					duration: 800
				})
				var item = this.headList[index]
				wx.navigateTo({
					url: '/pagesA/index/addMem'
				})
			},

		},

	}
</script>

<style scoped>
	.pageContent {
		min-height: 100vh;
		background: #F3F6F9;
		padding: 20rpx 0rpx 350rpx 0rpx;
	}

	.houseMain {
		background: #FFFFFF;
		padding: 0rpx 14rpx 0rpx 14rpx;
		margin: 0rpx 0rpx 20rpx 0rpx;
	}

	.houseTil {
		display: flex;
		justify-content: space-between;
		padding: 14rpx 14rpx 14rpx 14rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		color: #030303;
		border-bottom: 0.3rpx solid #E7E7E7;
	}

	.houseNo {
		padding: 14rpx 14rpx 14rpx 14rpx;
		font-size: 30rpx;
		color: #030303;
		border-bottom: 0.3rpx solid #E7E7E7;
	}

	.houseMes {
		display: flex;
		padding: 14rpx 0rpx 14rpx 0rpx;
	}

	.houseMesIt {
		line-height: 36rpx;
		background: #F2F8FF;
		border-radius: 6rpx;
		border: 1px solid #BCDEFF;
		color: #519AEE;
		font-size: 24rpx;
		margin-right: 10rpx;
		padding: 0rpx 14rpx 0rpx 14rpx;
	}

	.handler {
		display: flex;
		justify-content: flex-end;
		padding: 14rpx 14rpx 20rpx 14rpx;
		width: 100%;
	}

	.handlerCha {
		display: inline-block;
		height: 60rpx;
		width: 160rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		color: #1086FF;
		text-align: center;
		font-weight: bold;
	}

	.handlerBlu {
		color: #FFFFFF;
		background: #1086FF;
		margin-left: 18rpx;
	}

	.handlerEpt {
		background: #FFFFFF;
		border: 1rpx solid #1086FF;
	}

	.member {
		background: #FFFFFF;
		padding: 0rpx 20rpx 0rpx 20rpx;
		margin: 0rpx 0rpx 0rpx 0rpx;
	}

	.pageContent>.member:first-child {
		padding: 34rpx 20rpx 0rpx 20rpx;
	}

	.memberHead {
		height: 40rpx;
		line-height: 40rpx;
	}

	.memberHeadPro {
		float: left;
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
		width: 560rpx;
		height: 40rpx;
	}

	.memberHeadAdd {
		float: right;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #1086FF;
	}

	.memberMid {
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		padding: 34rpx 0rpx 30rpx 0rpx;
		border-bottom: 1rpx solid #E7E7E7;
	}

	.memberMidLeft {
		width: 230rpx;
		text-align: center;
	}

	.avatar {
		width: 148rpx;
		height: 148rpx;
		border-radius: 50%;
	}

	.userTypeMain {
		padding: 10rpx 0rpx 0rpx 0rpx;
	}

	.userType {
		background: #0053FF;
		color: #fff;
		font-size: 26rpx;
		border-radius: 30rpx;
		padding: 4rpx 20rpx 4rpx 20rpx;
		margin: 0rpx 0rpx 0rpx 0rpx;
	}

	.memberMsg {
		display: flex;
		flex-direction: row;
		margin: 0rpx 0rpx 10rpx 0rpx;
		height: 36rpx;
		line-height: 36rpx;
	}

	.memberName {
		width: 116rpx;
	}
</style>
